<template>
    <div class="filter-container">
        <FilterList :filterData="filterData" @filterClick="filterClick"></FilterList>
        <span>已选时间：</span>
        <el-button type="primary" style="margin-left: auto;">数据导出</el-button>
    </div>
    <div class="card-container">
        <div class="card">
            <div class="cardTitle">
                <span class="title">营业额统计</span>

            </div>

            <Trunover></Trunover>
        </div>
        <div class="card">
            <div class="cardTitle">
                <span class="title">用户统计</span>

            </div>
            <User v-model:searchDate="searchDate"></User>
        </div>
    </div>
    <div class="card-container">
        <div class="card">
            <div class="cardTitle">
                <span class="title">订单统计</span>
            </div>
            <Order v-model:searchDate="searchDate"></Order>
        </div>
        <div class="card">销量排名TOP10</div>
    </div>
</template>
<script setup lang="ts">
import type { DateRangeDto } from '@/api/common';
import { ref } from 'vue'
import { dayjs } from 'element-plus';

const searchDate = ref<DateRangeDto>({
    begin: '',
    end: ''
})
const filterData = [
    {
        index: 1,
        label: '昨日'
    },
    {
        index: 2,
        label: '进7日'
    },
    {
        index: 3,
        label: '进30日'
    },
    {
        index: 4,
        label: '本周'
    },
    {
        index: 5,
        label: '本月'
    }
]
const filterClick = (text: string) => {
    switch (text) {
        case '昨日':
            searchDate.value.begin = dayjs().subtract(1, 'day').format('YYYY-MM-DD')
            searchDate.value.end = dayjs().format('YYYY-MM-DD')
            break;
        case '进7日':
            searchDate.value.begin = dayjs().subtract(7, 'day').format('YYYY-MM-DD')
            searchDate.value.end = dayjs().format('YYYY-MM-DD')
            break;
        case '进30日':
            searchDate.value.begin = dayjs().subtract(30, 'day').format('YYYY-MM-DD')
            searchDate.value.end = dayjs().format('YYYY-MM-DD')
            break;
        case '本周':
            searchDate.value.begin = dayjs().startOf('week').format('YYYY-MM-DD')
            searchDate.value.end = dayjs().endOf('week').format('YYYY-MM-DD')
            break;
        case '本月':
            searchDate.value.begin = dayjs().startOf('month').format('YYYY-MM-DD');
            searchDate.value.end = dayjs().endOf('month').format('YYYY-MM-DD');
            break;
    }
}
</script>
<style scoped lang="scss"></style>